<template>
  <div class="tobBtoC">
    <div class="contentTopTitle">
        <div class="title">协议系统ICT收入</div>
    </div>
    <div>
      <el-form :inline="true" :model="form" label-width="60px" class="formList">
        <el-form-item label="区域" style="width: 19%">
          <dx-cascader
            :area_id.sync="form.areaId"
            :maxLevel="2"
            ref="cascader"
          />
        </el-form-item>
        <el-form-item label="账期" style="width: 18%">
          <el-date-picker
            v-model="form.year"
            type="month"
            placeholder="选择年"
            value-format="yyyyMM"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-select style="width: 240px;" v-model="checkList" multiple collapse-tags placeholder="请选择" @change="checkedType">
                <el-option 
                  v-for="item in form.checkList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

          <!-- <el-checkbox-group v-model="checkList" @change="checkedType">
            <el-checkbox
              v-for="(item, index) in form.checkList"
              :label="item.index"
              :key="index"
              >{{ item.value }}</el-checkbox
            >
          </el-checkbox-group> -->
        </el-form-item>
        <el-form-item style="width: 5%">
          <el-button size="small" type="primary" @click="search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item style="width: 5%">
          <el-button
            size="small"
            style="margin-left: 10px"
            type="orange"
            @click="exportModal"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content clearfix">
      <div class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="空间维度" name="first">
            <tab1 :rowData0="tableData0" :rawTime="time" ref="tab1"></tab1>
          </el-tab-pane>
          <!-- <el-tab-pane label="完成情况" name="second">
            <tab2 :rowData1="tableData1" :rawTime="time" ref="tab2"></tab2>
          </el-tab-pane>-->
          <el-tab-pane label="时间维度" name="second">
            <tab2 :rowData1="tableData1" ref="tab2"></tab2>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import tab1 from "./ict-tab1";
import tab2 from "./ict-tab2";
export default {
  name: "agreeIct",
  components: {
    tab1,
    tab2,
  },
  data() {
    return {
      form: {
        year: "",
        areaId: "",
        type: "0",
        checkList: [
          { label: "数字平台及集成服务", value: 0 },
          { label: "云业务收入", value: 1 },
          { label: "大数据和AI收入", value: 2 },
          { label: "IDC", value: 3 },
          { label: '智云护航',value: 4 },
          { label: '其他', value: 5 }
        ],
      },
      checkList: [0, 1, 2, 3, 5],
      activeName: "first",
      flag: 0,
      accountInfo: "",
      tableData0: [],
      tableData1: [],
      tableData2: [],
      colDefList: [],
      time: {},
      typeText: ''
    };
  },
  computed: {
    params() {
      let obj = {
        token: getCookie("token"),
        areaId: this.form.areaId,
        year: this.form.year,
      };
      return obj;
    },
  },
  created() {
    // if (this.$route.query.row) {
    //   let row = this.$route.query.row;
    //   this.form.areaId = row.areaId;
    //   this.form.year = row.accMonth;
    //   this.resourceId = true;
    // } else {
    //   this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    //   this.form.areaId = this.accountInfo.areaId;
    //   this.form.year = this.moment().format("YYYYMM");
    // }
  },
  mounted() {
    let that = this;

    that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    that.form.areaId = that.accountInfo.areaId;
    that.form.year = that.moment().subtract(1, "months").format("YYYYMM");

    this.init();
    //   $budgetAPI.toBtoCmonth(
    //     {},
    //     (res) => {
    //       if (res || res.code == 0) {
    //         this.form.year = res.content;
    //         this.init();
    //       }
    //     },
    //     (err) => {}
    //   );
  },
  methods: {
    //查询
    search() {
      let params = {
        month: this.form.year,
        areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
        type: this.typeText.toString()
      };
      this.listResourceData(params);
    },
    //导出
    exportModal() {
      let areaId = this.form.areaId;
      let year = this.form.year;
      let token = getCookie("token");
      let type = this.typeText.toString();

      if (this.flag == 0) {
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
            "/api/incomeICTCard/getIncomeCardData?token=" +
            token +
            "&areaId=" +
            areaId +
            "&month=" +
            year +
            "&type=" +
            type;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
            "/api/incomeICTCard/getIncomeCardData?token=" +
            token +
            "&areaId=" +
            areaId +
            "&month=" +
            year +
            "&type=" +
            type;
        }
      }
      if (this.flag == 1) {
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
            "/api/drawPortrait/getIncomeCardByYear?token=" +
            token +
            "&areaId=" +
            areaId +
            "&month=" +
            year +
            "&type=" +
            type;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
            "/api/drawPortrait/getIncomeCardByYear?token=" +
            token +
            "&areaId=" +
            areaId +
            "&month=" +
            year +
            "&type=" +
            type;
        }
      }
    },
    listResourceData(params) {
      let that = this,
        flag = that.flag,
        methods = ["getIncomeIct", "getIncomeIctYear", "incomeScore"],
        method = methods[flag];

      // that.$refs.tab1.tableLoading = true;
      // that.$refs.tab2.tableLoading = true;
      // that.$refs.tab3.tableLoading = true;
      $budgetAPI[method](
        params,
        (res) => {
          if (res.code == 0) {
            that["tableData" + flag] = res.content;
            that.time.type = this.type;
            switch (flag) {
              case 0:
                //
                that.$nextTick(() => {
                  that.$refs.tab1.tableLoading = true;
                  that.$refs.tab1.init();
                });
                // setTimeout(() => {}, 500);
                break;
              case 1:
                that.$nextTick(() => {
                  that.$refs.tab2.tableLoading = true;
                  that.$refs.tab2.init();
                });
                break;
              case 2:
                that.$nextTick(() => {
                  that.$refs.tab3.tableLoading = true;
                  that.$refs.tab3.init();
                });
                break;
            }
          } else {
            that.alertError(res);
          }
        },
        (err) => {}
      );
    },
    init() {
      let that = this,
        initType = [
          "数字平台及集成服务",
          "云业务收入",
          "大数据和AI收入",
          "IDC",
          '智云护航','其他'
        ],
        type = [];
      that.checkList.map((it, i) => {
        type.push(initType[it]);
      });

      let params = {
        month: this.form.year,
        areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
        type: type.toString(),
      };
      that.typeText = type;
      this.listResourceData(params);
    },
    //数据点击切换页请求不同的数据
    handleClick(tab, event) {
      let params = {
        month: this.form.year,
        areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
        type: this.typeText.toString()
      };
      if (tab.name == "first") {
        this.flag = 0;
        this.listResourceData(params);
      }
      if (tab.name == "second") {
        this.flag = 1;
        this.listResourceData(params);
      }
      if (tab.name == "third") {
        this.flag = 2;
        this.listResourceData(params);
      }
    },
    checkedType(val) {
      this.checkList = val;

      let that = this,
        initType = [
          "数字平台及集成服务",
          "云业务收入",
          "大数据和AI收入",
          "IDC",
          '智云护航','其他'
        ],
        type = [];
      that.checkList.map((it, i) => {
        type.push(initType[+it]);
      });

      that.typeText = type;
    },
  },
};
</script>

<style lang="scss" scoped>
.newUpToDownOrganization {
  .table-content {
    .table-header {
      display: flex;
      justify-content: space-between;
      .btn-right {
        display: flex;
      }
      .table-title {
        font-size: 14px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        span {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #418ee9;
          border-radius: 1000%;
          overflow: hidden;
          margin-right: 10px;
          margin-bottom: 3px;
        }
      }
    }
    .content {
      position: relative;
      .fileName {
        position: absolute;
        right: 0;
        top: 15px;
      }
    }
  }
}
</style>
<style lang="scss">
.tobBtoC {
  .formList {
    .el-form-item.btnBox {
      margin-bottom: 0px;
      width: 24%;
      margin-right: 0;
      .el-form-item__content {
        display: flex;
        width: 100%;
      }
    }
  }
  .upload-demo {
    display: inline-block;
    margin: 0 15px;
  }
}
</style>
